<template>
    <div>
        <el-form ref="form" :model="article" label-width="80px">
  <el-form-item label="文章标题">
    <el-input v-model="article.title" clearable maxlength="50" show-word-limit></el-input>
  </el-form-item>
  
  <el-form-item label="文章内容">
    <el-input type="textarea" v-model="article.body" :autosize="{minRows:8,maxRows:25}" maxlength="3000" show-word-limit></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button @click="goindex">取消</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        article: {
          title: '',
          body: ''
        }
      }
    },
    methods: {
      onSubmit() {
          this.$http.post('articles' , this.article).then(/*res*/()=>{
              /* 响应数据的正文 */
              /* console.log(res.data); */
              this.$message({
                message: '文章创建成功',
                type: 'success'
              });
              /* 跳转到文章列表页面 */
              this.$router.push('/articles/list')
          })  
      },

      goindex() {
         /* 跳转到文章列表页面 */
            this.$router.push('/articles/list')
            this.$message({
                type: 'info',
                message: '操作已取消'
              });
      }
    }
  }
</script>